<template>
  <view class="my-help">
    <head-box :titles="titles"></head-box>
    <div class="banner">
      <image :src="banner"></image>
      <div class="tab-botton content">
        <div class="form">
          <div class="form-item u-border-bottom">
            <label class="l1"> <i>姓名</i> <span>*</span> </label
            ><u-input
              v-model="form.name"
              placeholder="请输入姓名"
              placeholder-style="{width: 'auto',fontSize: '28rpx',fontFamily: 'PingFang;',fontWeight: '500',color: '#BBBBBB',}"
            />
          </div>
          <div class="form-item u-border-bottom">
            <label> <i>联系方式</i> <span>*</span> </label
            ><u-input
              @blur="onContact"
              v-model="form.contact"
              maxlength="11"
              placeholder="请输入联系方式"
              placeholder-style="{width: 'auto',fontSize: '28rpx',fontFamily: 'PingFang;',fontWeight: '500',color: '#BBBBBB',}"
            />
          </div>
          <div class="form-item u-border-bottom">
            <label> <i>身份证号</i> <span>*</span> </label
            ><u-input
              @blur="onIdentity"
              maxlength="18"
              v-model="form.identity"
              placeholder="请输入身份证号"
              placeholder-style="{width: 'auto',fontSize: '28rpx',fontFamily: 'PingFang;',fontWeight: '500',color: '#BBBBBB',}"
            />
          </div>
          <div class="form-item f1 u-border-bottom form-item-checked">
            <label> <i>是否保密</i> </label>
            <u-radio-group v-model="form.secret">
              <u-radio
                :label-disabled="false"
                :active-color="activeColor"
                width="34rpx"
                height="34rpx"
                icon-size="16rpx"
                :name="0"
                >是</u-radio
              >
              <u-radio
                :label-disabled="false"
                :active-color="activeColor"
                width="34rpx"
                height="34rpx"
                icon-size="16rpx"
                :name="1"
                >否</u-radio
              >
            </u-radio-group>
          </div>
          <div class="form-item lp u-border-bottom" @click="$refs.address.show = true">
            <label> <i>所在地区</i> </label>
            <div class="sub">{{ form.area }}</div>
            <image src="../../static/img/drop-down.png"></image>
          </div>
          <div class="form-item lp u-border-bottom" @click="form.groupShow = true">
            <label> <i>咨询群团</i> </label>
            <div class="sub">{{ form.group }}</div>
            <image src="../../static/img/drop-down.png"></image>
          </div>
          <div class="form-item u-border-bottom textarea">
            <label> <i>具体内容</i> <span>*</span> </label
            ><u-input
              class="u2-textarea"
              type="textarea"
              border
              fixed
              height="200"
              maxlength="300"
              v-model="form.content"
              placeholder="请输入具体内容"
              placeholder-style="{width: 'auto',fontSize: '28rpx',fontFamily: 'PingFang;',fontWeight: '500',color: '#BBBBBB'}"
            />
          </div>
        </div>
        <div class="sub">
          <u-button hover-class="none" :custom-style="customStyle" @click="onsubMit">
            <text class="text">提交</text>
          </u-button>
        </div>
      </div>

      <tabs-box></tabs-box>
    </div>
    <u-select
      v-model="form.show"
      mode="single-column"
      :list="form.areaList"
      @confirm="onConfirmare"
      :default-value="form.defaultList"
    ></u-select>
    <u-select
      v-model="form.groupShow"
      mode="single-column"
      :list="form.groupList"
      :default-value="form.groupDefaultList"
      @confirm="onGroupConfirmare"
    ></u-select>
    <selectAddress @confirm="onSelectDictActionSheet" ref="address"></selectAddress>
  </view>
</template>

<script>
import { isPhoneReg, idCardReg, getIsTokenAndInfo } from '@/common/type'
import { asterisk } from '@/common/base'
import { mapState } from 'vuex'
import { gpGpinfoList, gpUseradvise } from '@/api/group'
import { goLogin } from '@/common/base'
import selectAddress from '@/components/selectAddress/selectAddress'
export default {
  props: {},
  components: {
    selectAddress,
  },
  data() {
    return {
      helpParas: {}, //进来的参数
      activeColor: '#FF8706', //单选按钮样式
      titles: '', //标题
      //用户的信息情况
      form: {
        show: false, //地区选择展示
        groupShow: false, //群团选择展示
        name: '', //姓名
        contact: '', //联系方式
        phone: '', //不展示星号
        identity: '', //身份证号
        idCored: '', //不展示身份证号
        area: '请选择地区', //所在地区
        areaId: '', //所有地区id
        defaultList: [0], //第几的位置
        groupDefaultList: [0], //第几的位置
        areaList: [], //地区列表
        groupList: [], //群团列表
        group: '请选择群团', //群团
        groupId: '', //群团id
        content: '', //具体内容
        secret: 0, //是否要保密
        secretId: '', //保密状态id
      },
      isLogin: false,
      //按钮样式
      customStyle: {
        width: '455rpx',
        height: '60rpx',
        background: 'linear-gradient(180deg, #82A5FF, #386FFF)',
        borderRadius: '30rpx',
      },
      //banner图
      banner: `../../static/my-cell/d7245e33908adba1da422c7aac67b57.png`,
    }
  },
  computed: {
    ...mapState(['userInfo']),
  },
  onLoad(opt) {
    const { index, type } = opt
    this.helpParas = opt
    const style = {
      width: '455rpx',
      height: '60rpx',
      borderRadius: '30rpx',
      background: '',
    }
    let title = ''
    let img = ``
    if (type === 'help') {
      style.background = 'linear-gradient(180deg, #FFA693, #FF7C71)'
      img = `../../static/my-cell/04373eb8f83b05fff29ef2fe9a918da.png`
      title = '我需要帮助'
    } else if (type === 'idea') {
      style.background = 'linear-gradient(180deg, #969EE9, #7662FE)'
      img = `../../static/my-cell/2184f1eb255c7e563ece23032c68fc1.png`
      title = '我有金点子'
    } else if (type === 'advisory') {
      style.background = 'linear-gradient(180deg, #82A5FF, #386FFF)'
      img = `../../static/my-cell/d7245e33908adba1da422c7aac67b57.png`
      title = '我需要咨询'
    }
    this.customStyle = style
    this.banner = img
    this.titles = title
    this.gpGpinfoList()
  },
  onShow() {
    // #ifdef H5
    console.log('分享')
    this.$wxSetShare()
    // #endif
    this.getIsTokenAndInfo()
  },
  methods: {
    //当登录后提示
    getIsTokenAndInfo() {
      getIsTokenAndInfo()
        .then((res) => {
          const { result } = res
          this.isLogin = true
          if (result) {
            const { userNickname, userPid, userPhone } = this.$store.state.userInfo
            this.onIdentity(userPid)
            this.onContact(userPhone)
            this.form.idCored = userPid
            this.form.name = userNickname
            this.form.phone = userPhone
          }
        })
        .catch((e) => {
          this.isLogin = false
        })
    },
    //群团选择
    onGroupConfirmare(e) {
      const form = this.form
      const { label, value } = e[0]
      form.group = label
      form.groupId = value
      const index = form.groupList.findIndex((item) => {
        return item.value === value
      })
      form.groupDefaultList = [index]
    },
    //地区选择
    onSelectDictActionSheet(e) {
      const form = this.form
      const { label, value } = e
      form.area = label
      form.areaId = value
    },
    //群团列表
    gpGpinfoList() {
      gpGpinfoList({ pageSize: 15, pageNo: 1,gpinfoCode:'!100' })
        .then((res) => {
          const {
            code,
            result: { records: list },
          } = res
          const pList = []
          if (code === 200) {
            list.map((item) => {
              const { id, gpinfoName } = item
              pList.push({
                value: id,
                label:
                  id === '1381811725371736065' ? '中国国际贸易促进委员会杭州市委员会' : gpinfoName,
              })
            })
            this.form.groupList = pList
          }
        })
        .catch((e) => {})
    },
    //联系方式输入
    onContact(e) {
      if (isPhoneReg(e)) {
        if (e.length === 11) {
          this.form.contact = asterisk(e, 3, 4, 7)
        }
      }
      this.form.phone = e
    },
    //身份证号
    onIdentity(e) {
      if (idCardReg(e)) {
        if (e.length === 18) {
          this.form.identity = asterisk(e, 6, 8, 14)
        }
      }
      this.form.idCored = e
    },
    //提交前的判断
    formFun() {
      const form = this.form
      if (!form.name.length || !form.name.trim()) {
        this.$api.msg('请输入姓名')
        return false
      }
      if (!form.phone.length || !form.phone.trim()) {
        this.$api.msg('请输入联系方式')
        return false
      }
      if (!isPhoneReg(form.phone)) {
        this.$api.msg('联系方式不合法')
        return false
      }
      if (!form.idCored.length || !form.idCored.trim()) {
        this.$api.msg('请输入身份证号')
        return false
      }
      if (form.idCored.length !== 18) {
        this.$api.msg(
          `您输入的身份证为${form.idCored.length}位,离18位还差${18 - form.idCored.length}位呢`
        )
        return false
      }
      if (!idCardReg(form.idCored)) {
        this.$api.msg('身份证号不合法')
        return false
      }
      if (!form.content.length) {
        this.$api.msg('请输入具体内容')
        return false
      }
      if (form.content.length <= 5) {
        this.$api.msg('具体内容至少5个字以上')
        return false
      }
      if (!this.isLogin) {
        goLogin()
        return
      }
      return true
    },
    //提交数据了
    onsubMit() {
      if (this.formFun()) {
        const { id: userId } = this.userInfo
        const {
          areaId: gpinfoAreaCode,
          groupId: gpinfoId,
          secret,
          name: userPname,
          idCored: userPid,
          content: adviseContent,
        } = this.form
        const helpParasType = this.helpParas.type
        const helpParasList = {
          help: 5,
          idea: 4,
          advisory: 6,
        }
        const useradviseType = helpParasList[helpParasType]
        const params = {
          adviseContent, //用户建议
          gpinfoAreaCode, //区编码
          gpinfoId, //群团ID
          secret: !secret ? 1 : 0,
          userId, //用户ID
          userPid, //用户身份证
          userPname, //用户姓名
          useradviseType, //建议类型 1：我有建议（去掉） 2：我有活动 3:我有阵地（去掉） 4：我有金点子 5:我来奉献
        }
        const token = uni.getStorageSync('token')
        if (token) {
          this.$api.showLoading({ title: '申请中' })
          gpUseradvise(params)
            .then((res) => {
              const { code, result, message } = res
              if (code === 200) {
                this.$api.hideLoading()
                this.$api.msg(result)
                setTimeout(() => {
                  this.$api.handleMenu('/pages/me-call/me-call')
                }, 2000)
              } else {
                this.$api.msg(message)
                this.$api.hideLoading()
              }
            })
            .catch((e) => {
              this.$api.msg(e.message)
              this.$api.hideLoading()
            })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.u2-textarea {
  // background: gold;
}
.my-help {
  position: relative;
  .banner {
    height: 371rpx;
    image {
      width: 100%;
    }
  }
  .content {
    position: absolute;
    top: 351rpx;
    width: 702rpx;
    height: 983rpx;
    background: #ffffff;
    border-radius: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    .form {
      padding: 0 24rpx 0 24rpx;
      .form-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 113rpx;
        label {
          width: auto;
          font-size: 30rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #222222;
          white-space: nowrap;
          padding-right: 121rpx;
          i {
            font-style: normal;
          }
          span {
            width: 14rpx;
            height: 14rpx;
            font-size: 30rpx;
            font-family: PingFang;
            font-weight: 500;
            color: #ea0000;
            margin-left: 17rpx;
            vertical-align: middle;
          }
        }
        .l1 {
          padding-right: 184rpx;
        }
      }
      .textarea {
        height: 200rpx;
      }
      .form-item-checked {
        line-height: 113rpx;
      }
      .f1 {
        display: block;
        label {
          padding-right: 153rpx;
        }
      }
      .lp {
        image {
          width: 32rpx;
          height: 15rpx;
          margin-right: 15rpx;
        }
      }
      .textarea {
        /deep/ .u-input__textarea {
          max-height: 150rpx;
          overflow-y: scroll;
        }
      }
    }
    .sub {
      padding: 53rpx 0 61rpx 0;
      /deep/ .u-btn {
        &:after {
          border: transparent;
        }
      }
      .text {
        width: 54rpx;
        line-height: 27rpx;
        font-size: 28rpx;
        font-family: PingFang;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
}
</style>
